import PreviewLayout from '@/components/DataPreview/layout';
import ChatContentView from '@/components/DataPreview/session/ChatContentView';
import ChatBody from '@/components/DataPreview/session/chat';
import useStorage from '@/hooks/useStorage';
import { ISession } from '@/ts/core';
import { Layout } from 'antd';
import { Resizable } from 'devextreme-react';
import React, { useState } from 'react';
const { Content, Sider } = Layout;

interface IProps {
  session: ISession;
  bodyType: string;
}
// 会话
const HomeChat: React.FC<IProps> = ({ session, bodyType }) => {
  const [mySession, setMySession] = useState<ISession>(session);
  const [mainWidth, setMainWidth] = useStorage<string | number>('mainWidth', '40%');
  return (
    <Layout className={'main_layout'}>
      <Layout className={'body'}>
        <Resizable
          handles={'right'}
          width={mainWidth}
          onResize={(e) => setMainWidth(e.width)}>
          <Sider className={'content'} width={'100%'}>
            <ChatContentView
              showHeader={false}
              height={'calc(100vh - 148px)'}
              target={session.target}
              open={(session: ISession) => {
                setMySession(session);
              }}
            />
          </Sider>
        </Resizable>
        <Content className={'content'}>
          <PreviewLayout entity={mySession}>
            <ChatBody
              key={mySession.target.key}
              chat={mySession}
              filter={''}
              styles={{
                height: 'calc(100vh - 140px)',
              }}
            />
          </PreviewLayout>
        </Content>
      </Layout>
    </Layout>
  );
};

export default HomeChat;
